<template>
  <view class="flex-col page">
    <view class="flex-col group">
      <view class="flex-col group_1">
        <text class="text_1">步骤一 做好设计（图文并茂）</text>
        <text class="text_2">
          作品集简述，本作品集中描述了关于新手装修全攻略，并且展示作品集流程。作品集简述，本作品集中描述了关于新手装修全攻略，并且展示作品集流程。
        </text>
      </view>
      <view class="flex-col group_2">
        <text class="text_3">进阶版</text>
        <view class="flex-col group_3">
          <view class="flex-col section_1">
            <view class="justify-between section_2">
              <view class="flex-row">
                <image
                  src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557828150053166153.png"
                  class="image_1"
                />
                <text class="text_4">1、了解自己可能喜欢的装…</text>
              </view>
              <image
                src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557838861113221762.png"
                class="image_2"
              />
            </view>
          </view>
          <view class="flex-col group_5">
            <view class="flex-row list-item">
              <image
			  :src="imgUrl+'16557826814892567217.png'"
              
                class="image_3 image_4"
              />
              <view class="flex-col group_6">
                <text class="text_5">1、了解自己可能喜欢的装修风格及装修档次和费用估算</text>
                <view class="justify-between group_7">
                  <view class="flex-row">
                    <view class="flex-row">
                      <image
					  :src="imgUrl+'16557826815113801323.png'"
                    
                        class="image_5 image_6"
                      />
                      <text class="text_6">56</text>
                    </view>
                    <view class="flex-row group_10">
                      <image
					  :src="imgUrl+'16557826815580468287.png'"
                       
                        class="image_5 image_7"
                      />
                      <text class="text_7">20</text>
                    </view>
                    <view class="flex-row group_11">
                      <image
					  :src="imgUrl+'16557826848890561770.png'"
                       
                        class="image_5 image_8"
                      />
                      <text class="text_8">245</text>
                    </view>
                  </view>
                  <image
				   :src="imgUrl+'16557826815062483643.png'"
                   
                    class="image_5"
                  />
                </view>
              </view>
            </view>
            <view class="justify-between list-item_1">
              <view class="flex-row">
                <image
				:src="imgUrl+'16557826848952076616.png'"
                 
                  class="image_3"
                />
                <view class="flex-col group_14">
                  <text class="text_9">2、选择合适的设计师</text>
                  <view class="flex-row group_15">
                    <view class="flex-row">
                      <image
					  :src="imgUrl+'16557826815113801323.png'"
                      
                        class="image_5 image_11"
                      />
                      <text class="text_10">56</text>
                    </view>
                    <view class="flex-row group_17">
                      <image
					   :src="imgUrl+'16557826815580468287.png'"
                        
                        class="image_5 image_12"
                      />
                      <text class="text_11">20</text>
                    </view>
                    <view class="flex-row group_18">
                      <image
					  :src="imgUrl+'16557826817919777278.png'"
                       
                        class="image_5 image_13"
                      />
                      <text class="text_12">245</text>
                    </view>
                  </view>
                </view>
              </view>
              <image
			   :src="imgUrl+' 16557826815062483643.png'"
               
                class="image_5 image_14"
              />
            </view>
            <view class="flex-row list-item_1">
              <image
			   :src="imgUrl+'16557826814892567217.png'"
              
                class="image_3 image_15"
              />
              <view class="flex-col group_20">
                <text class="text_13">3、充分地沟通需求和现场详细测量</text>
                <view class="flex-row group_21">
                  <view class="flex-row">
                    <image
					:src="imgUrl+'16557826815113801323.png'"
                     
                      class="image_5 image_16"
                    />
                    <text class="text_14">56</text>
                  </view>
                  <view class="flex-row group_23">
                    <image
					:src="imgUrl+'16557826815580468287.png'"
                     
                      class="image_5 image_17"
                    />
                    <text class="text_15">20</text>
                  </view>
                  <view class="flex-row group_24">
                    <image
					:src="imgUrl+'16557826817919777278.png'"
                    
                      class="image_5 image_18"
                    />
                    <text class="text_16">245</text>
                  </view>
                </view>
              </view>
              <image
			  :src="imgUrl+'16557826815062483643.png'"
               
                class="image_5 image_19"
              />
            </view>
            <view class="flex-row list-item_2">
              <image
			  :src="imgUrl+'16557826848952076616.png'"
               
                class="image_3 image_20"
              />
              <view class="flex-col group_25">
                <text class="text_17">4、对设计的平面设计（空间布局）进行论证并现场模拟可行性</text>
                <view class="justify-between group_26">
                  <view class="flex-row">
                    <view class="flex-row">
                      <image
					   :src="imgUrl+'16557826815113801323.png'"
                       
                        class="image_5 image_21"
                      />
                      <text class="text_18">56</text>
                    </view>
                    <view class="flex-row group_29">
                      <image
					  :src="imgUrl+'16557826815580468287.png'"
                       
                        class="image_5 image_22"
                      />
                      <text class="text_19">20</text>
                    </view>
                    <view class="flex-row group_30">
                      <image
					  :src="imgUrl+'16557826817919777278.png'"
                       
                        class="image_5 image_23"
                      />
                      <text class="text_20">245</text>
                    </view>
                  </view>
                  <image
				  :src="imgUrl+'16557826815062483643.png'"
                  
                    class="image_5"
                  />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
		  imgUrl:this.$IMG_URL,
	  };
    },
    methods: {},
  };
</script>

<style scoped lang="scss">
  .list-item_1 {
    padding: 31rpx 0 32rpx;
    border-bottom: solid 1rpx #eeeeee;
  }
  .image_3 {
    border-radius: 16rpx;
    width: 180rpx;
    height: 180rpx;
  }
  .image_5 {
    width: 32rpx;
    height: 32rpx;
  }
  .page {
    background-color: #ffffffff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }
  .group {
    padding-bottom: 14rpx;
    flex: 1 1 auto;
    overflow-y: auto;
  }
  .group_1 {
    padding: 31rpx 32rpx 0;
  }
  .group_2 {
    margin-top: 63rpx;
    padding-top: 31rpx;
    border-top: solid 1rpx #eeeeee;
  }
  .text_1 {
    align-self: flex-start;
    color: #191919;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text_2 {
    margin-top: 33rpx;
    color: #666666;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
    text-align: left;
  }
  .text_3 {
    margin-left: 32rpx;
    align-self: flex-start;
    color: #191919;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .group_3 {
    margin-top: 33rpx;
  }
  .section_1 {
    padding-bottom: 25rpx;
    background-image: linear-gradient(180deg, #1b55d300 0%, #1b55d300 0%, #1b55d317 100%, #1b55d317 100%);
  }
  .group_5 {
    padding: 0 32rpx;
  }
  .section_2 {
    margin: 0 32rpx;
    padding: 17rpx 24rpx 23rpx 32.5rpx;
    background-color: #ffffff;
    box-shadow: 0px -2rpx 12rpx 0px #133e9b14;
    border-radius: 36rpx;
  }
  .list-item {
    padding: 32rpx 0;
    border-bottom: solid 1rpx #eeeeee;
  }
  .list-item_2 {
    padding: 33rpx 0 32rpx;
    border-bottom: solid 1rpx #eeeeee;
  }
  .image_2 {
    margin-top: 6rpx;
    width: 14rpx;
    height: 26rpx;
  }
  .image_4 {
    flex-shrink: 0;
  }
  .group_6 {
    margin-left: 24rpx;
    flex: 1 1 auto;
  }
  .image_14 {
    margin-top: 150rpx;
  }
  .image_15 {
    flex-shrink: 0;
  }
  .group_20 {
    margin-left: 24rpx;
    flex: 1 1 auto;
  }
  .image_19 {
    margin-left: 12rpx;
    margin-top: 150rpx;
    flex-shrink: 0;
  }
  .image_20 {
    flex-shrink: 0;
  }
  .group_25 {
    margin-left: 24rpx;
    flex: 1 1 auto;
  }
  .image_1 {
    margin-top: 6.5rpx;
    flex-shrink: 0;
    width: 103rpx;
    height: 24.5rpx;
  }
  .text_4 {
    margin-left: 37.5rpx;
    margin-bottom: 3rpx;
    color: #666666;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_5 {
    color: #191919;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
    text-align: left;
  }
  .group_7 {
    margin-top: 82rpx;
  }
  .group_14 {
    margin-left: 24rpx;
  }
  .text_13 {
    color: #191919;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .group_21 {
    margin-top: 117rpx;
  }
  .text_17 {
    color: #191919;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
    text-align: left;
  }
  .group_26 {
    margin-top: 82rpx;
  }
  .text_9 {
    align-self: flex-start;
    color: #191919;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .group_15 {
    margin-top: 117rpx;
  }
  .group_23 {
    margin-left: 47rpx;
  }
  .group_24 {
    margin-left: 48rpx;
  }
  .group_10 {
    margin-left: 47rpx;
  }
  .group_11 {
    margin-left: 48rpx;
  }
  .group_17 {
    margin-left: 47rpx;
  }
  .group_18 {
    margin-left: 48rpx;
  }
  .image_16 {
    flex-shrink: 0;
  }
  .text_14 {
    margin-left: 8rpx;
    color: #191919;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .image_17 {
    flex-shrink: 0;
  }
  .text_15 {
    margin-left: 8rpx;
    color: #191919;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .image_18 {
    flex-shrink: 0;
  }
  .text_16 {
    margin-left: 8rpx;
    color: #191919;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .group_29 {
    margin-left: 47rpx;
  }
  .group_30 {
    margin-left: 48rpx;
  }
  .image_6 {
    flex-shrink: 0;
  }
  .text_6 {
    margin-left: 8rpx;
    color: #191919;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .image_7 {
    flex-shrink: 0;
  }
  .text_7 {
    margin-left: 8rpx;
    color: #191919;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .image_8 {
    flex-shrink: 0;
  }
  .text_8 {
    margin-left: 8rpx;
    color: #191919;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .image_11 {
    flex-shrink: 0;
  }
  .text_10 {
    margin-left: 8rpx;
    color: #191919;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .image_12 {
    flex-shrink: 0;
  }
  .text_11 {
    margin-left: 8rpx;
    color: #191919;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .image_13 {
    flex-shrink: 0;
  }
  .text_12 {
    margin-left: 8rpx;
    color: #191919;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .image_21 {
    flex-shrink: 0;
  }
  .text_18 {
    margin-left: 8rpx;
    color: #191919;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .image_22 {
    flex-shrink: 0;
  }
  .text_19 {
    margin-left: 8rpx;
    color: #191919;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .image_23 {
    flex-shrink: 0;
  }
  .text_20 {
    margin-left: 8rpx;
    color: #191919;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
</style>